<template>
    <div>
        <div class="onepx-vote"></div>
        <div class="vote-box clearfix">
            <span class="vote-item" :class="{'on': upOn}" @click="upClick">
                <i class="up"></i>
                <span class="count">{{up | vote upOn}}</span>
            </span>
            <span class="vote-item" :class="{'on': downOn}" @click="downClick">
                <i class="down"></i>
                <span class="count">{{down | vote downOn}}</span>
            </span>
        </div>
    </div>
</template>

<script>
import fadeOut from './FadeOut.vue'
import storage from './../../utils/storage.js'
import config from './../../config.js'
import store from './../../store'

const voteName = config.voteName

var voteStorage = storage.get(voteName);
if(!voteStorage){
    voteStorage = {ads: [], vote: []};
    storage.set(voteName, voteStorage);
}

var getSiblingClassIndex = function (el, name, value) {
    var siblings = el.parentNode.querySelectorAll(name);

    var index = [].findIndex.call(siblings, function (el, index) {
        return el.classList.contains(value);
    })

    return index
}

var voteHandle = function (el, id, vote) {

    var index = getSiblingClassIndex(el, '.vote-item', 'on'),
        hasTag = true;

    if(id){
        if( index === -1 ){
            voteStorage.ads.push(id);
            voteStorage.vote.push(vote);
            storage.set(voteName, voteStorage);
            hasTag = false;
        }else if( index === 0 ){
            fadeOut.main('您已顶过');
        }else if( index === 1){
            fadeOut.main('您已踩过');
        }
    }

    return hasTag
}

var checkStorage = function (id, type) {
    let flag = false,
        index;
    if(voteStorage && voteStorage.ads){
        index = voteStorage.ads.indexOf(id);
        if(index !== -1){
            flag = voteStorage.vote[index] === type ? true : false
        }
    }

    return flag
}


export default {
    name: 'VoteView',
    data () {
        return {
            upOn: checkStorage(this.aid, 1),
            downOn: checkStorage(this.aid, -1)
        }
    },
    props: {
        up: Number,
        down: Number,
        aid: Number,
    },
    methods: {
        upClick: function (e) {
            var hasTag = voteHandle(e.currentTarget, this.aid, 1);
            if(!hasTag){
                this.upOn = true;
                this.sendPv(1)
            }
        },
        downClick: function (e) {
            var hasTag = voteHandle(e.currentTarget, this.aid, -1);
            if(!hasTag){
                this.downOn = true;
                this.sendPv(2)
            }

//            if(Date.now() % 4 === 0){
//                console.warn('eW91ciBsZWFkZXIgaXMgYSBzaGl0LCBhbiBhY3Rvcg==')
//            }
        },
        sendPv: function(type){
            store.vote(this.aid, type);
        }
    },
    watch: {
        'aid': function(val){
            this.upOn = checkStorage(this.aid, 1);
            this.downOn = checkStorage(this.aid, -1);
        }
    }

}
</script>
<style>
    .vote-box{
        height: 42px;
        border-bottom: 1px solid #e2e2e2;
        text-align: center;
        line-height: 42px;
    }

    .vote-box .vote-item{
        display: block;
        position: relative;
        float: left;
        box-sizing: border-box;
        width: 50%;
    }

    .vote-box .vote-item:first-child:before{
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background-color: #e2e2e2;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
    }

    .vote-box i{
        display: inline-block;
        vertical-align: middle;
    }

    .vote-box .up{
        width: 20px;
        height: 20px;
        background-image: url('/static/images/sprite/up_unselected.png');
        background-size: 100% 100%;
    }

    .vote-box .down{
        width: 25px;
        height: 20px;
        background-image: url('/static/images/sprite/down_unselected.png');
        background-size: 100% 100%;
    }

    .vote-box .on .up{
        background-image: url('/static/images/sprite/up_selected.png');
    }

    .vote-box .on .down{
        background-image: url('/static/images/sprite/down_selected.png');
    }

    .vote-box .count{
        padding-left: 5px;
        vertical-align: middle;
        font-size: 13px;
        color: #c5c5c5;
    }

    .vote-box .on .count{
        color: #f9a825;
    }

    .onepx-vote{
        width: 100%;
        height: 1px;
        background-color: #e2e2e2;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

</style>